<template>
  <div class="page-container">
    <el-form :model="form" :rules="rules" ref="bookForm" label-width="120px" class="form-container">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" autocomplete="off" class="full-width-input"></el-input>
      </el-form-item>
      <el-form-item label="通知书编号" prop="adnumber">
        <div class="input-wrapper">
          <el-input
              v-model="form.adnumber"
              type="text"
              autocomplete="off"
              maxlength="8"
              class="full-width-input"
          ></el-input>
          <span v-if="authorError" class="error-message">{{ authorError }}</span>
        </div>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="form.idCard" autocomplete="off" class="full-width-input"></el-input>
      </el-form-item>
      <el-form-item label="证件照">
        <div class="upload-section">
          <div class="upload-controls">
            <el-upload
                class="upload-demo"
                action="http://localhost:8080/api/files/upload"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :on-success="successUpload"
                :on-error="errorUpload"
                accept="image/jpeg,image/png"
            >
              <el-button size="small" type="primary">点击上传图片</el-button>
            </el-upload>
            <div class="image-requirements">
              <div>尺寸大小为1或2寸</div>
              <div>文件小于2M</div>
              <div>支持JPG/PNG格式图片</div>
            </div>
          </div>
          <div v-if="imageUrl" class="image-preview">
            <img :src="imageUrl" alt="Uploaded Image" />
          </div>
        </div>
      </el-form-item>
      <el-form-item class="submit-button-container">
        <el-button type="primary" @click="submit" class="centered-button">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      form: {
        name: '',
        adnumber: '',
        idCard: '',
        img: ''
      },
      authorError: '',
      imageUrl: null,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 50, message: '姓名长度必须在 2 到 50 个字符之间', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5·a-zA-Z\s\-']+$/, message: '姓名只能包含汉字、英文字母、空格、连字符和撇号', trigger: 'blur' }
        ],
        adnumber: [
          { required: true, message: '请输入通知书编号', trigger: 'blur' },
          { pattern: /^\d{8}$/, message: '通知书编号必须是八位数字', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}([0-9Xx])$/, message: '身份证号格式不正确', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {

    successUpload(res,file) {
      this.form.img = file.name; // 使用文件的原始名称
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code === '0') {
        this.$message.success("上传成功");
      } else {
        this.$message.error(res.msg)
      }
    },
    errorUpload(err, file) {
      this.uploadError = true; // 设置错误标志
      console.error('Upload error:', err); // 可以在控制台输出更详细的错误信息
    },
    beforeUpload(file) {
      const fileName = file.name;
      if (fileName && fileName.length<12) {
        this.$message.error("图片命名不规范");
        return false;
      }
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式！');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB！');
        return false;
      }
      return true;
    },
    submit() {
      this.$refs.bookForm.validate((valid) => {
        if (valid) {
          request.post("/book", this.form).then(res => {
            if (res.code === '0') {
              this.$message.success("操作成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error('请完善表单信息');
        }
      });
    }
  },
  created() {
    if (this.$route.query.form) {
      this.form = JSON.parse(this.$route.query.form);
      this.imageUrl = this.form.img ? `http://localhost:8080/api/files/${this.form.img}` : null;
    }
  }
};
</script>

<style scoped>
.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.form-container {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.full-width-input {
  width: 100%;
}

.upload-demo {
  margin-bottom: 20px;
}

.image-preview {
  margin-top: 20px;
}

.image-preview img {
  max-width: 200px;
  max-height: 200px;
}

.centered-button {
  display: block;
  width: 100%;
  height: 40px;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.submit-button-container {
  text-align: center;
  margin-top: 20px;
}
.upload-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 16px; /* 添加间隙 */
}
.upload-section {
  display: flex;
  flex-direction: column;
}

.upload-controls {
  display: flex;
  align-items: center; /* 确保内容垂直居中 */
  gap: 20px; /* 设置按钮和文本之间的间隙 */
}

.image-requirements {
  display: flex;
  flex-direction: column; /* 文本垂直排列 */
  font-size: 14px; /* 增加文本大小 */
  color: #4A90E2; /* 更加醒目的蓝色 */
  font-family: 'Arial', sans-serif; /* 更现代的字体 */
  background-color: #F0F4F8; /* 轻微的背景色增加对比 */
  padding: 10px;
  border-radius: 5px; /* 边角圆滑 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影增加立体感 */
}

.image-preview {
  margin-top: 20px; /* 增加与上传控件的间距 */
}

.image-preview img {
  max-width: 200px;
  max-height: 200px;
}


</style>
